<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>购物车</title>
</head>
<body>
<h2>这是我的vuejs版本购物车</h2>
<div id="box">
  <template v-if="goods.length">
    <table border="1" cellspacing="0">
      <tr>
        <td>编号</td>
        <td>商品名称</td>
        <td>单价</td>
        <td>数量</td>
        <td>小计</td>
      </tr>
      <tr v-for="(it,i) in goods">
        <td>{{it.iD}}</td>
        <td>{{it.name}}</td>
        <td>￥{{it.pricer}}</td>
        <td>
          <button
                  v-on:click="jiang(i)"
                  v-bind:disabled="goods[i].selectCount>=goods[i].fase"
          >
            -</button>{{selectCount[i]}}<button
                v-on:click="add(i)"
                v-bind:disabled="goods[i].selectCount>=goods[i].fase"
        >
        +
        </button>
        </td>
        <td>￥{{xj[i]}}</td>
      </tr>
    </table>
    <h3>您的商品总价为：{{total}},<button v-om:click="pay">支付按钮</button></h3>
  </template>
  <template v-else>
    <div>亲，本商品没有上桇。</div>
  </template>
</div>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
  new Vue({
    el: "#box",
    methods: {
      pay:function (){
        axios:post('/pay',{
          'goodes':this.goodes,
          'xj':this.xj,
          'selectCount':this.selectCount,
          'total':this.total
        })
        .then(function (res){
          console.log("支付失败")
        }).catch((error)=>{
          console.log("支付成功")
                });
      },
      add: function (x) {
        if (this.selectCount[x] < this.goods[x].fase) {
          this.selectCount[x]++;
          this.xj[x]=this.xj[x]+this.goods[x].pricer;
          this.total=this.total+this.goods[x].pricer;
        }
      },
      jiang:function (x){
        if (this.selectCount[x] >0) {
          this.selectCount[x]--;
          this.xj[x]=this.xj[x]-this.goods[x].pricer;
          this.total=this.total-this.goods[x].pricer;
        }
      }
    },
    data: {
      goods: "",
      total: 0,
      selectCount:[],
      xj:[]
    },
    mounted:function (){
      axios({
        method:'get',
        url:'/GetServlet',
      }).then((res)=>{
        this.goods=res.data;
        for(var i=0;i<this.goods.length;i++){
          this.xj[i]=0;
          this.selectCount[i]=0;
        }
      })
    }
  });
</script>
</body>
</html>